<template>
  <div id="records">
    <el-container>
      <el-header>
        <span>批量管理</span>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-select v-model="level" placeholder="请选择年龄段" size="large" class="select-class" @change="getCourseList">
              <el-option label="F1" value="3" />
              <el-option label="F2" value="4" />
              <el-option label="F3" value="5" />
              <el-option label="F4" value="6" />
              <el-option label="F5" value="7" />
              <el-option label="S1" value="8" />
              <el-option label="S2" value="9" />
              <el-option label="Scratch" value="10" />
              <el-option label="木编" value="11" />
              <el-option label="Python" value="12" />
              <el-option label="Python+机器人" value="13" />
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select v-model="course" placeholder="请选择课程主题" size="large" class="select-class" @change="selectCourse">
              <el-option v-for="item in courses.data" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-col>
        </el-row>
        <el-button type="warning" :icon="UploadFilled" @click="
          insert();
        ">批量提交</el-button>
      </el-header>

      <el-main>
        <el-aside>
          <el-card>
            <template #header>
              <div>
                <span>勾选会员</span>
              </div>
            </template>
            <el-tree ref="treeRef" :props="props" :data="tree.data" show-checkbox check-strictly="true" node-key="id"
              @check-change="handleCheckChange" />
          </el-card>

        </el-aside>
        <el-container>
          <el-card>
            <template #header>
              <div>
                <span>勾选课程</span>
              </div>
            </template>
            <el-table :show-header="false" ref="singleTableRef" :data="course_contents.data" highlight-current-row
              style="width: 100%" @current-change="handleChange">
              <el-table-column label="课程内容">
                <template #default="scope">
                  <p v-html="scope.row.content"></p>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import type { LoadFunction } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

import {
  Tree,
  tree,
  getTree,
  level,
  course,
  courses,
  getCourseList,
  remarks,
  selectCourse,
  course_contents,
  handleChange,
  treeRef,
  students,
  insert

} from "./records";

getTree();
let count = 1
const props = {
  label: 'name',
  children: 'children',
}

const handleCheckChange = (
  data: Tree,
  checked: boolean,
  indeterminate: boolean
) => {
  students.value = treeRef.value?.getCheckedNodes() ?? []
}
</script>
<style lang="scss">
#records {
  .ep-container {
    background: #ffffff;
    height: auto;

    .ep-card {
      .ep-card__header {
        font-size: 20px;
        font-weight: bold;
        color: #898989;
      }

      .ep-card__body {
        padding: 0px;
      }
    }

    .ep-header {
      align-items: center;
      justify-content: space-between;
      display: flex;
      text-align: left;
      margin: 10px;
      height: 40px;

      span {
        margin-right: 20px;
      }

      .ep-button {
        height: 40px;
        padding: 12px 30px;


      }
    }

    .ep-main {
      display: flex;
      height: calc(100% - 60px);

      .ep-aside {
        width: 25%;

        .ep-header {
          padding: 0px;
          margin: 0px;
          height: auto;
        }

        .ep-tree-node__content {
          padding: 8px;
        }
      }

      .ep-container {
        padding: 0px;
        margin: 0px;
        height: auto;
        text-align: left;

        .ep-card {
          width: 100%;

          p {
            margin: 0;
            padding: 0;
          }
        }
      }
    }
  }
}
</style>
